<template>
	<div class="swh" :class="[on?'on':'off']" @click="on=!on">
		<div class="br"></div>
	</div>
</template>

<script setup>
	import {
		onMounted, //页面初始化
		onUnmounted, //页面卸载
		nextTick,
		computed,
		reactive,
		watch, //监控
		ref, //
		toRefs
	} from "vue";

	//外层绑定@onFn="hOnFn"
	const emit = defineEmits(['onFn', 'onUnSave']);
	//触发
	const hOnFn = (t) => {
		emit('onFn', t);
	}

	const hFn = () => {

	}
	//属性导出
	//使用方法 ref="rdom" rdom.value.hFn()
	defineExpose({
		hFn
	});


	//属性定义
	//数据绑定v-bind:dat="dat"  	 
	const props = defineProps({
		on: {
			type: Boolean,
			default: true
		},
	});



	onMounted(() => nextTick(() => {

	}));
	onUnmounted(() => {

	})
</script>

<style scoped lang="scss">
	.swh {
		width: 66px;
		height: 20px;
		border-radius: 19px;
		border: 2px solid rgba(231, 240, 253, 0.42);
		background: #1F5283;
		box-shadow: inset 0 0 7px 0px #b8b8b85c;
		cursor: pointer;
		z-index: 1;

		.br {
			background: linear-gradient(65deg, #ACCBEE, #E7F0FD);
			border-radius: 19px;
			width: 60%;
			height: 100%;
			transition: all .3s;
			 
		}
	}

	.swh.off {
		box-shadow: none;

		.br {
			margin-left: 40%;
		}
	}
</style>

<style module>
	/**
	 * 类名会被打乱
	 *绑定方法   :class="[$style.fullscreen]"
	 *申明 .fullscreen 
   */
</style>